<template>
	<view class="content">
		<view class="addView">
			<view class="title">添加信访案件</view>
			<view class="form_view">
				<form @submit="addSubmit" class="form_1">
					<view class="uploadImage" :style="{backgroundColor:PicbgColor}" @click="uploadPic">
						<image v-if="imagelocationPath!=''?true:false" class="letterPic" :src="imagelocationPath" mode="aspectFit" @click.stop="previewPic"></image>
						<view class="uploadDelate" v-if="imagelocationPath!=''?true:false">X</view>
					</view>
					<view class="input_view">
						<!-- <label class="label_1">负责人：</label> -->
						<uni-combox class="combox_1" label="负责人" placeholder="请选择负责人" :candidates="workers"></uni-combox>
					</view>
					<view class="input_view">
						<!-- <label class="label_1">油烟噪音：</label> -->
						<uni-combox class="combox_1" label="职责" placeholder="请选择负责人" :candidates="tasks"></uni-combox>
					</view>
					<view class="input_view">
						<label class="label_1">受理日期：</label>
						<uni-datetime-picker class="datetime_1" type="date" :value="date" start="2020-6-15" end="2025-6-15" @change="dateChange"></uni-datetime-picker>
					</view>
					<button class="login_button" form-type="submit">添加</button>
				</form>
			</view>		
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				workers: ["吴玉春","王建国","罗才英"],
				tasks: ["油烟噪音","查违拆违"],
				date: null,
				imagelocationPath: "",
				imagePath: "",
				PicbgColor: ""
			}
		},
		methods: {
			//点击图片上传触发
			uploadPic() {
				//选择本地图片
				let that = this
				uni.chooseImage({
					count:1,
					success(e) {
						console.log("图片选择成功",e)
						that.PicbgColor = "#000000"
						that.imagelocationPath = e.tempFiles[0].path
					}
				})
			},
			previewPic() {
				console.log("预览图片")
				let that = this
				let imgArr = []
				imgArr[0] = that.imagelocationPath
				uni.previewImage({
					current: 0,
					urls: imgArr
				})
			},
			addSubmit() {
				console.log("提交要上传的图片:",this.imagelocationPath)
			},
			dateChange(e) {
				console.log("时间选择函数触发")
				console.log(e)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #55aaff;
		height: 100%;
		// clear: both;
	}
	
	.content {
		position: fixed;
		height: 100%;
		background-color: #55aaff;
		// clear: both;
		/* display: flex; */
		/* flex-direction: column; */
	}
	
	.addView {
		position: fixed;
		margin-top: 165rpx;
		width: 750rpx;
		height: 100%;
		// padding: 10rpx;
		clear: both;
		background-color: #FFFFFF;
		border-radius: 30px 30px 0 0;
	}
	
	.title {
		height: 200rpx;
		// background-color: #63A35C;
		line-height: 200rpx;
		font-size: 35rpx;
		text-align: center;
		font-weight: bold;
	}
	
	.form_view {
		height: 400rpx;
		width: 750rpx;
		display: flex;
		flex-direction: column;
		//画图片上传按钮
		.uploadImage {
			width: 300rpx;
			height: 300rpx;
			// background-color: #404040;
			border-radius: 10px;
			border: 1px solid #C4C4C4;
			outline: 70rpx solid #C4C4C4;
			outline-offset: -218rpx;
			text-align: center;
			.letterPic {
				width: 295rpx;
				height: 295rpx;
				// background-color: #000000;
			}
			.uploadDelate {
				float: right;
				background-color: #4CD964;
				width: 20rpx;
				height: 20rpx;
			}
		}
		.form_1{
			// display: flex;
			// flex-direction: column;
			margin-left: 50rpx;
			margin-right: 50rpx;
			margin-top: 100rpx;
			// background-color: #666666;
			.input_view {
				height: 100rpx;
				border-bottom: 1px solid #d3d7d4;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				.combox_1 {
					width: 650rpx;
				}
				.label_1 {
					width: 200rpx;
				}
				.datetime_1 {
					width: 450rpx;
				}
			}
			.login_button {
				line-height: 80rpx;
				color: #FFFFFF;
				font-size: 25rpx;
				height: 80rpx;
				margin-top: 100rpx;
				background-color: #55aaff;
				-moz-box-shadow:2px 2px 10px #A9A9A9;
				-webkit-box-shadow:2px 2px 10px #A9A9A9;
				box-shadow:2px 2px 10px #A9A9A9;
			}
		}	
	}
</style>
